<script setup>
import { Horizontal } from '@nutui/icons-vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useLoginUserStore } from '@/stores'
import { storeToRefs } from 'pinia'
const { loginUserInfo } = storeToRefs(useLoginUserStore())

const router = useRouter()
console.log('loginUserInfo', loginUserInfo)
const userInfo = ref({
  name: loginUserInfo.value.userName,
  phone: loginUserInfo.value.loginName,
  Avatar_img: loginUserInfo.value.profilePicture
})

//用户主页跳转
const onUserInfo = () => {
  router.push('/user/UserCenter/UserInfo')
  // router.push({
  //   name: 'user_homepage',
  //   params: { userId: '123' }
  // })
}
const onUserWork = (url) => {
  router.push(url)
}
</script>
<template>
  <div class="personal_center">
    <!-- 主页头部 -->
    <div class="personal_header">
      <div class="user_header_title">
        <div>用户中心</div>
        <div><Horizontal /></div>
      </div>
      <div class="user_info">
        <nut-cell-group class="cell-group_class">
          <!-- 个人中心 -->
          <nut-cell is-link class="nut-cell_class" @click="onUserInfo">
            <template #title>
              <div class="user-info_body">
                <div class="user_left_img">
                  <nut-avatar shape="square" size="large">
                    <img :src="userInfo.Avatar_img" alt="" />
                  </nut-avatar>
                </div>
                <div class="user_detailed_info">
                  <div class="user_name">{{ userInfo.name }}</div>
                  <div class="user_phone">{{ userInfo.phone }}</div>
                </div>
              </div>
            </template>
          </nut-cell>
        </nut-cell-group>
      </div>
      <div :style="'height: 20px'"></div>
    </div>
    <!-- 个人中心功能 -->
    <div class="personal_center_function">
      <nut-cell-group>
        <nut-cell
          @click="onUserWork('/user/UserCenter/workRecords')"
          title="工作量"
          is-link
        >
        </nut-cell>
        <nut-cell
          @click="onUserWork('/user/UserCenter/salaryRecords')"
          title="我的工资"
          is-link
        >
        </nut-cell>
        <nut-cell
          @click="onUserWork('/user/UserCenter/attendanceRecord')"
          title="我的考勤"
          is-link
        >
        </nut-cell>
        <nut-cell
          @click="onUserWork('/user/UserCenter/updPassword')"
          title="修改密码"
          is-link
        >
        </nut-cell>
        <nut-cell @click="onUserWork('/login')" title="退出登录" is-link>
        </nut-cell>
      </nut-cell-group>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.personal_center {
  .personal_header {
    background-image: url('https://picsum.photos/375/150?13');
    .user_header_title {
      margin: 0px 20px;
      display: flex;
      justify-content: space-between;
      height: 30px;
      align-items: center;
    }
    .user_info {
      .cell-group_class {
        :deep(.nut-cell-group__wrap) {
          background-color: transparent !important;
          box-shadow: none;
        }
        .nut-cell_class {
          background-color: transparent !important;
        }
      }
      .user-info_body {
        display: flex;
        .user_left_img {
          img {
            border-radius: 5px;
          }
        }
        .user_detailed_info {
          margin: 0px 10px;
          .user_name {
            font-size: 22px;
            height: 30px;
            line-height: 30px;
            font-weight: 600;
          }
        }
      }
    }
  }
  .personal_center_function {
    margin-top: -20px;
  }
}
</style>
